<div class="tlp-form-element">
    <label class="tlp-label" for="username">Username</label>
    <input type="text" class="tlp-input" id="username" name="username" placeholder="fox_mulder">
</div>

<div class="tlp-form-element">
    <label class="tlp-label" for="input-year">Year</label>
    <input type="text" class="tlp-input" id="input-year" name="year" size="4" placeholder="1972">
</div>

<div class="tlp-form-element">
    <label class="tlp-label" for="username-help">Username help</label>
    <input type="text" class="tlp-input" id="username-help" name="username" placeholder="fox_mulder">
    <p class="tlp-text-info"><i class="fa fa-life-saver"></i> Hey bro', I'm a help text. I'm here to help you.</p>
</div>

<div class="tlp-form-element">
    <label class="tlp-label" for="username-required">Username mandatory <i class="fa fa-asterisk"></i></label>
    <input type="text" class="tlp-input" id="username-required" name="username" placeholder="fox_mulder" required>
</div>

<div class="tlp-form-element tlp-form-element-disabled">
    <label class="tlp-label" for="username-disabled">Username disabled</label>
    <input type="text" class="tlp-input" id="username-disabled" name="username" placeholder="fox_mulder" disabled>
</div>

<div class="tlp-form-element tlp-form-element-error">
    <label class="tlp-label" for="username-error">Username error</label>
    <input type="text" class="tlp-input" id="username-error" name="username" placeholder="fox_mulder">
    <p class="tlp-text-danger">Oops, it seems you missed something <i class="fa fa-frown-o"></i></p>
</div>

<div class="tlp-form-element">
    <label class="tlp-label" for="username-small">Username small</label>
    <input type="text" class="tlp-input tlp-input-small" id="username-small" name="username" placeholder="fox_mulder">
</div>
<div class="tlp-form-element">
    <label class="tlp-label" for="username-large">Username large</label>
    <input type="text" class="tlp-input tlp-input-large" id="username-large" name="username" placeholder="fox_mulder">
</div>
